import React, { Component } from 'react';
import RenderFooter from '../components/ListView/RenderFooter';
import { ListView, PullToRefresh, NavBar,Icon,List } from 'antd-mobile';
import TabBar from '../components/TabBar';
import { bindActionCreators } from 'redux';
import { getListData, redirectList } from '../redux/actions/global';
import { connect } from 'react-redux';
import { SCHOOL_985 } from '../constants/api';
const Item = List.Item;


class Header extends Component {
  render() {
    return (
      <div></div>
    )
  }
}

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }
  componentDidMount() {
    const { lists } = this.props;
    if(lists.data[lists.key].num === 0){ //判断是否加载过数据
      setTimeout(()=>{
        this.setState({
          refreshing: true
        });
      })
      this.loadData().then(()=>{
        setTimeout(()=>{
          this.setState({
            refreshing: false
          });
        },500)
      });
    }else{
      if(this.lv){
        // 回到原来位置
        this.lv.scrollTo(0, lists.offsetTop);
      }
    }
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    setTimeout(() => {
      this.setState({
        refreshing: false
      });
      this.loadData();
    }, 600);
  };

  onEndReached = (event) => {
    const { lists, getListData } = this.props;
    let listData = lists.data[lists.key];
    let dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    if(listData.realNum < listData.num){
      var parame = {
        page: listData.parame.page + 1,
        size: listData.parame.size
      }
      getListData(SCHOOL_985, parame, listData.rData, dataSource);
    }
  }

  loadData() {
    const { getListData } = this.props;
    let dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    var parame = {
      page: 1,
      size: 10
    }
    return getListData(SCHOOL_985, parame, null, dataSource);
  }

  redirectTo = () => {
    const { redirectList } = this.props;
    redirectList('/demo', this.lv.listviewRef.scrollProperties.offset);
  }

  render() {
    const { lists, redirectList } = this.props;
    let listData = lists.data[lists.key];
    const row = (rowData, sectionID, rowID) => {
      return (
        <div className="list_content">
          <Item key={rowData.schoolid}>
            <a href="javascript:void(0)" onClick={this.redirectTo}>
              <img src={rowData.imgurl} />
              <h2>{rowData.schoolname}</h2>
              <p>
                <i className="icon-difang01 iconfont"></i>
                {rowData.place}
              </p>
             <span>
               <i className="icon-xiaoyuan iconfont"></i>
               {rowData.belong}
             </span>
            </a>
          </Item>
        </div>
      );
    };
    const MyBody = (props) => {
      return (
        <div className="am-list-body my-body">
          {props.children}
        </div>
      );
    }
    return (
      <div className="page-info">
        <NavBar>985高校</NavBar>
        <TabBar />
        <div className="content">
          <ListView
            ref={el => this.lv = el}
            dataSource={listData.dataSource}
            // renderHeader={() => <Header/>}
            renderFooter={() => <RenderFooter num={listData.num} realNum={listData.realNum}/>}
            renderRow={row}
            className="am-list"
            renderBodyComponent={() => <MyBody />}
            style={{
              height: document.documentElement.clientHeight - 45 - 42
            }}
            initialListSize={listData.realNum}
            scrollRenderAheadDistance={0}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={100}
            pullToRefresh={<PullToRefresh
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh}
              distanceToRefresh={30}
            />}
          />
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    lists: state.lists,
  }
}
// redux 绑定dispath
const mapDispatchToProps = (dispatch) => {
  return {
    getListData: bindActionCreators(getListData, dispatch),
    redirectList: bindActionCreators(redirectList, dispatch),
  }
}

Index = connect(mapStateToProps, mapDispatchToProps)(Index)

export default Index
